<template>
<div class="mainBox">
    <div class="nav">
        <van-nav-bar :title="filmName"  left-arrow @click-left="clickLeft" @click-right="clickRight">
        <template #right>
            <van-icon name="search" size="18"/>
        </template>
        </van-nav-bar>
    </div>

    <div class="date" style="margin-top: 20px;">
        <ul style="display: flex;overflow-x: auto;white-space: nowrap;margin-left: 15px;">
            <li v-for="(item,index) in halfMonthDates" :key="index" 
            style="padding: 0 10px;height: 30px;"
            :class="{active:index === indexClass}"
            @click="clickLi(index)">{{ item }}</li>
        </ul>
    </div>

    <div class="fot">
        <van-dropdown-menu active-color="#ff5f16">
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2"  @change="changeValue2"/>
        </van-dropdown-menu>
    </div>

    <div class="boxList" style="margin-top: 25px;" v-for="item in store.cinemasDetailList" :key="item.cinemaId">
            <div class="item">
                <span style="max-width: 80%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;">{{ item.name }}</span>
                <span style="color: #ff5f16;">￥40</span>
            </div>
            <div class="item">
                <span style="color: #797d82;
                            font-size: 12px;
                            max-width: 80%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                ">{{ item.address }}</span>
                <span style="color: #797d82;font-size: 12px;">距离未知</span>
            </div>
        </div>
</div>
</template>

<script setup>

import { onBeforeMount, onMounted,provide,ref} from 'vue';
import listStore from '../store';
import { useRoute } from 'vue-router';
import router from '../router';

const store  = listStore()
const route = useRoute()
const filmName = ref("标题")

   
const halfMonthDates = ref([]); // 初始化日期数组
const indexClass = ref(0)   // 认选中的日期索引
const value1 = ref(0)   // 默认下拉菜单显示索引0的内容
const value2 = ref(0)


const option1 = [
      { text: '全城', value: 0 },
    ];
    const option2 = [
      { text: '最近去过', value: 0 },
      { text: '离我最近', value: 1 },
    ];


onMounted(async()=>{
    // 每次都要把数据清空，防止同一个数据追加多次
    store.cinemasIds = {}
    store.cinemasDetailList = null
    
    store.bottom = false
    store.filmId  = route.params.filmId
   
    // 通过 filmId去查找电影名

  filmName.value =  store.mainDataList.filter((item)=>{
        if(store.filmId == item.filmId) {
            return item
        }
    })
    filmName.value = filmName.value[0].name 

     // 获取当前日期
     const currentDate = new Date();

        // 计算半个月后的日期
        const halfMonthLaterDate = new Date(currentDate);
        halfMonthLaterDate.setDate(currentDate.getDate() + 15);

        // 循环生成日期数组
        let currentDateCopy = new Date(currentDate);
        while (currentDateCopy <= halfMonthLaterDate) {
        const year = currentDateCopy.getFullYear();
        const month = String(currentDateCopy.getMonth() + 1).padStart(2, '0');
        const day = String(currentDateCopy.getDate()).padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;
        halfMonthDates.value.push(formattedDate);

        // 增加一天
        currentDateCopy.setDate(currentDateCopy.getDate() + 1);
        }

        console.log(halfMonthDates.value);

        // 获取有该电影的所有影院id
       await store.getCinamesIds(store.filmId,store.cityId)

       // 通过影院id获得影院信息
       console.log(store.cityId);
       store.cinemasIds.cityId = store.cityId
       await store.getCinamesIdList()

})
const changeValue2 = ((value)=>{
    console.log(value);
})
// 给用户的点击添加颜色
const clickLi = (async(index)=>{
    indexClass.value = index

    // 重新调用通过影院id获得影院信息方法
    // store.cinemasDetailList = null
    console.log(store.cinemasDetailList);
    await store.getDateCinamesIdList()
})

// 点击左箭头返回list
const clickLeft = (()=>{
    console.log(store.cinemasDetailList);
    router.push("/list")
})

// 点击右搜索
const clickRight = (()=>{
    router.push("/cinemas/search")
})

</script>

<style scoped>

li.active {
    
    /* border-bottom: 2px solid #ff5f16; */
    color: #ff5f16;
  }
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center ;
    /* margin-top: 15px; */
    padding: 0 25px;
}
</style>